<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title site-demo-title">
        <li class="layui-this i18n-lan-title"></li>
    </ul>
    <div class="main-content">
        <div class="layui-form-item">
            <label class="layui-form-label i18n-lan-name"></label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label i18n-lan-inetport"></label>
            <div class="layui-input-block">
                <input type="text" name="inetPort" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label i18n-lan-ip"></label>
            <div class="layui-input-block">
                <input type="text" name="lan" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn update"></button>
                <button class="layui-btn layui-btn-primary back"></button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("input[name='name']").val(clientList[clientIndex].proxyMappings[mappingIndex].name);
        $("input[name='inetPort']").val(clientList[clientIndex].proxyMappings[mappingIndex].inetPort);
        $("input[name='lan']").val(clientList[clientIndex].proxyMappings[mappingIndex].lan);
        $(".i18n-lan-title").html($.i18n.prop('lan.editconfig'));
        $(".i18n-lan-name").html($.i18n.prop('lan.name'));
        $(".i18n-lan-inetport").html($.i18n.prop('lan.inetport'));
        $(".i18n-lan-ip").html($.i18n.prop('lan.ip'));
        $("input[name='inetPort']").attr("placeholder", $.i18n.prop('lan.inetport.placeholder'));
        $("input[name='lan']").attr("placeholder", $.i18n.prop('lan.ip.placeholder'));
        $(".update").html($.i18n.prop('public.submit'));
        $(".back").html($.i18n.prop('public.back'));
    });
    $(".update").click(function () {
        var name = $("input[name='name']").val();
        if (name == "") {
            layer.alert($.i18n.prop('lan.notice.inputname'), {title: "Tips"});
            return;
        }
        var inetPort = $("input[name='inetPort']").val();
        if (inetPort == "") {
            layer.alert($.i18n.prop('lan.notice.inputinetport'), {title: "Tips"});
            return;
        }
        if (!check_port(inetPort)) {
            layer.alert($.i18n.prop('lan.notice.errorport'), {title: "Tips"});
            return;
        }

        var lan = $("input[name='lan']").val();
        if (lan == "") {
            layer.alert($.i18n.prop('lan.notice.inputlan'), {title: "Tips"});
            return;
        }

        clientList[clientIndex].proxyMappings[mappingIndex] = {
            name: name,
            inetPort: inetPort,
            lan: lan
        };

        api_invoke("/config/update", clientList, function (data) {
            if (data.code == 20000) {
                layer.alert($.i18n.prop('public.notice.updatesuccess'), {title: "Tips"}, function (index) {
                    layer.close(index);
                    load_page("html/lan/list.html");
                });
            }
        });
    });

    $(".back").click(function () {
        load_page("html/lan/list.html");
    });
</script>
